import {Grid, List, Swiper, TabBar} from "antd-mobile";
import './index.scss'
import {useEffect, useState} from "react";
import {getGroupsAPI, getNewsAPI, getSwipersAPI} from "../../apis/list";

import {ChatCheckOutline, CompassOutline, TeamOutline, TravelOutline, UploadOutline,} from "antd-mobile-icons";
import {useNavigate} from "react-router-dom";
import {Search} from "react-vant";
import Flex from "react-vant/es/flex/Flex";
import {getCurrentCity} from "../../utils";


const Index = () => {

    // 导航栏数据
    const navs = [
        {
            key: '/home/findHouse',
            title: '整租',
            icon: <ChatCheckOutline/>,
        },
        {
            key: '/home/jointHouse',
            title: '合租',
            icon: <TeamOutline/>,
        },
        {
            key: '/map',
            title: '地图找房',
            icon: <TravelOutline/>,
        },
        {
            key: '/home/rentOut',
            title: '去出租',
            icon: <UploadOutline/>,
        },
    ]

    // 实现路由跳转的钩子函数
    const navigate = useNavigate();
    const switchRoute = (path) => {
        navigate(path)
    }

    // 轮播图的数据
    const [swipers, setSwipers] = useState([]);

    // 租房小组数据
    const [groups, setGroups] = useState([]);

    // 最新资讯数据
    const [news, setNews] = useState([]);

    // 当前地址数据
    const [city, setCity] = useState('');

    // 渲染完成后执行
    useEffect(() => {
        // 定义轮播图的请求函数
        const getSwipers = async () => {
            const res = await getSwipersAPI();
            setSwipers(res.data.body)
        }
        getSwipers()

        const params = {
            area: '88cff55c-aaa4-e2e0'
        }
        // 定义租房小组的请求函数
        const getGroups = async () => {
            const res = await getGroupsAPI(params);
            setGroups(res.data.body)
        }
        getGroups()

        // 定义最新资讯的请求函数
        const getNews = async () => {
            const res = await getNewsAPI(params);
            setNews(res.data.body)
        }
        getNews()

        // 定义城市名称的请求函数
        const getCity = async () => {
            const res = await getCurrentCity();
            setCity(res.label)
        }
        getCity()


    }, [])

    const [searchValue, setSearchValue] = useState('');

    // h5中地理位置的API
    navigator.geolocation.getCurrentPosition(position => {
        console.log(position)
    })

    return (
        <>
            {/*  走马灯  */}
            <div className="swiper">
                <Swiper
                    loop
                    autoplay
                >
                    {swipers.map(item => (
                        <Swiper.Item key={item.id}>
                            <div
                                className={'content'}>
                                <img className="img"
                                     src={`http://localhost:8080${item.imgSrc}`}
                                     alt=""/>
                            </div>
                        </Swiper.Item>
                    ))}
                </Swiper>
            </div>

            {/*  搜索框  */}
            <div className="search-box">
                <Flex>
                    <Search
                        showAction
                        label={<div onClick={() => navigate("/cityList")}>{city}</div>}
                        actionText={<div onClick={() => navigate("/home/search")}>搜索</div>}
                        value={searchValue}
                        onChange={setSearchValue}
                        placeholder="请输入小区或地址"
                    />
                    <CompassOutline className="user-icon"
                                    color='var(--adm-color-primary)'
                                    onClick={() => navigate("/map")}/>

                </Flex>

            </div>

            {/* 导航菜单 */}
            <div>
                <TabBar onChange={switchRoute} defaultActiveKey="">
                    {navs.map(item => (
                        <TabBar.Item key={item.key} icon={item.icon} title={item.title}/>
                    ))}
                </TabBar>
            </div>

            {/*  租房小组  */}
            <div className="group">
                <h3 className="group-title">
                    租房小组 <span className="more">更多</span>
                </h3>

                <Grid columns={2} gap={10}>
                    {groups.map(item => (
                        <Grid.Item key={item.key}>
                            <div className="group-item">
                                <div className="desc">
                                    <p className="title">{item.title}</p>
                                    <span className="info">{item.desc}</span>
                                </div>
                                <img src={`http://localhost:8080${item.imgSrc}`} alt=""/>
                            </div>
                        </Grid.Item>
                    ))}
                </Grid>
            </div>

            {/*  最新资讯  */}
            <div className="news">
                <h3 className="group-title">最新资讯</h3>
                <List>
                    {news.map(item => (
                        <List.Item
                            key={item.id}
                        >
                            <div className="news-item">
                                <div className="imgwrap">
                                    <img className="img" src={`http://localhost:8080${item.imgSrc}`} alt=""/>
                                </div>
                                <Flex direction="column" justify="between">
                                    <h3 className="title">
                                        {item.title}
                                    </h3>
                                    <Flex className="info" justify="between">
                                        <div className="from">{item.from}</div>
                                        <div className="date">{item.date}</div>
                                    </Flex>
                                </Flex>
                            </div>
                        </List.Item>
                    ))}
                </List>
            </div>

        </>
    )
}

export default Index